<template>
  <view style="padding-top: 100rpx; padding-left: 20rpx; padding-right: 20rpx;">
    <!-- 输入值区域 -->
    <view class="text-area" style="margin-bottom: 30rpx;">
      <text style="font-size: 28rpx;">输入值:</text>
      <input 
        type="text" 
        v-model="title" 
        style="color: red; border: 1rpx solid #eee; padding: 15rpx; margin-left: 20rpx; flex: 1;"
        placeholder="请输入要传递的内容"
      />
    </view>

    <!-- 回传值区域 -->
    <view class="text-area" style="margin-bottom: 50rpx;">
      <text style="font-size: 28rpx;">回传值:</text>
      <input 
        type="text" 
        :value="callBackValue" 
        style="color: blue; border: 1rpx solid #eee; padding: 15rpx; margin-left: 20rpx; flex: 1;"
        readonly
      />
    </view>

    <!-- 子组件引用 -->
    <comA :intent="title"></comA>
    <comB @callBackFun="callBack" style="margin-top: 30rpx;"></comB>
  </view>
</template>

<script>
// 导入子组件
import comA from '../../components/compA.vue'
import comB from '../../components/compB.vue'

export default {
  components: { comA, comB }, // 注册组件
  data() {
    return {
      title: '', // 父组件输入值，传递给子组件A
      callBackValue: '' // 接收子组件B的回传值
    };
  },
  methods: {
    // 接收子组件B的回传值
    callBack(msg) {
      console.warn("---父组件接收回传值--->" + msg);
      this.callBackValue = msg;
    }
  }
};
</script>

<style scoped>
.text-area {
  display: flex;
  align-items: center;
}
</style>